import React from 'react';
import { List, InputItem, Button} from 'antd-mobile';
import {connect} from 'react-redux';
import {loginState} from '../../redux/action/action';
import { createForm } from 'rc-form';
import './a.scss';

const Item = List.Item;
function emp_test(a){return 0===a.replace(/^\s+|\s+$/g,"").length?!1:!0};

class login extends React.Component{
  state = {
    errMsg: ' '
  }
  toSetState = (val) => {
    this.setState({
      errMsg:val
    })
    setTimeout(()=>{
      this.setState({
        errMsg:''
      })
    },2000)
  }
  onSubmit = () => {
    let tel = this.refs.tel.state.value,
        psw = this.refs.psw.state.value;
    if(!emp_test(tel)){
      this.toSetState('手机号不能为空')
    }else if(!(/^1(3|4|5|7|8)\d{9}$/.test(tel))){
      this.toSetState('手机号格式不正确')
    }else if(!emp_test(psw)){
      this.toSetState('验证码不能为空')
    }else if(psw.trim().length !==4){
      this.toSetState('请输入有效的验证码')
    }else{
      console.log('ok',{tel:tel,password:psw});
      const { dispatch } = this.props;
      loginState(dispatch,1)
    }
  }
  render(){
    //  const { getFieldProps, getFieldError } = this.props.form;
    return(
      <div id="login">
        <form>
          <List
          renderHeader={() => 'Form Validation'}
        >
          <InputItem
            ref="tel"
            type="number"
            maxLength="11"
            clear
            placeholder="请输入手机号"
          >手机号</InputItem>
          <InputItem style={{width:"1.4rem"}}
            ref="psw"
          type="number">
            验证码
            <Button type="default" className="getCode" size="small" inline onClick={this.getCode}>获取验证码</Button>
          </InputItem>
          <div className="am-list-footer" style={{height:'.52rem',textAlign:'center'}}>{this.state.errMsg}</div>
            <Item>
              <Button type="primary" size="small" onClick={this.onSubmit}>提交</Button>
            </Item>
          </List>
        </form>
      </div>

    )
  }
}

const loginForm = createForm()(login)

const mapStateToProps = (state) => ({
  loginState:state.user
})

export default connect(mapStateToProps)(loginForm);
